<template>
  <a-tabs :activeKey="actionActiveKeys.activeKey" @change="businessCenterTabsChange"
          style="padding: 0 25px 0 25px; background: white">
    <a-tab-pane v-for="tab in tabPaneListProp" :key="tab.key" :tab="tab.tab">
      <template v-if="actionActiveKeys.activeKey === 'formTask/my/applyTaskList'">
        <business-search-export
            @search="apiGetFormTaskListSearch"
        />
      </template>
      <!-- 局长待办可导出 -->
      <template v-else-if="actionActiveKeys.activeKey === 'formTask/my/todoTaskList' && roleId === '363'">
        <div class="business-tabs-export">
          <a-button @click="exportExcelClick">
            导出excel
          </a-button>
        </div>
      </template>
      <business-table
          :businessCenterTableData="businessCenterTableData"
          :businessCenterTablePagination="businessCenterTablePagination"
          :businessCenterTableColumn="businessCenterTableColumnCloneColumn"
          :businessCenterTablePaginationChange="businessCenterTablePaginationChange"
          :activeKey="actionActiveKeys.activeKey"
          @businessTableDataChaneg="businessTableDataChaneg"
      />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import BusinessSearchExport from "@/views/home/components/BusinessSearchExport";
import BusinessTable from "@/views/home/components/BusinessTable";
import {getFormTaskList} from "@/api/approve/approve";
import {uploadProcess} from '@/api/linYi'
import {downLoadFileByBlob} from '@/components/buttonAboutExcel/utils.js'
import {message} from 'ant-design-vue';
import {getMaxLength} from "@/utils";
import _ from 'lodash';
import {getLocalStorage} from "@/utils/localstore"

export default {
  name: "BusinessTabs",
  props: {
    activeKeyIndex: {
      type: String,
      default: () => ''
    }
  },
  components: {
    BusinessSearchExport,
    BusinessTable
  },
  data() {
    return {
      tabPaneListProp: [
        {
          key: 'formTask/my/applyTaskList',
          tab: '我的申请',
        },
        {
          key: 'formTask/my/todoTaskList',
          tab: '我的待办'
        },
        {
          key: 'formTask/my/approveList',
          tab: '已办申请'
        },
        {
          key: 'adminBasic/getDraft',
          tab: '我的草稿'
        }
      ],
      actionActiveKeys: {
        activeKey: ''
      },
      businessCenterTableData: [],
      businessCenterTablePagination: {
        current: 1,
        pageSize: 10,
        showQuickJumper: true,
        total: 0
      },
      businessCenterTableColumn: [
        {
          dataIndex: 'RN',
          title: '序号',
          width: 100,
          align: 'center',
          scopedSlots: {customRender: 'rnAction'}
        },
        {
          dataIndex: 'status',
          title: '环节状态',
          width: 150,
          align: 'center',
          scopedSlots: {customRender: 'statusAction'}
        },
        {
          dataIndex: 'assigneeNames',
          title: '任务人',
          width: 200,
          align: 'center'
        },
        {
          dataIndex: 'subject',
          title: '主题',
          width: 200,
          align: 'center'
        },
        {
          dataIndex: 'money',
          title: '金额',
          width: 200,
          align: 'center',
          scopedSlots: {customRender: 'moneyAction'}
        },
        {
          dataIndex: 'creator',
          title: '创建人',
          width: 200,
          align: 'center'
        },
        {
          dataIndex: 'createTime',
          title: '创建时间',
          width: 200,
          align: 'center'
        },
        {
          dataIndex: 'endTime',
          title: '结束时间',
          width: 200,
          align: 'center'
        },

      ],
      businessCenterTableColumnCloneColumn: [],
      actionColumns: {
        'formTask/my/applyTaskList': {
          title: '操作',
          width: 180,
          align: 'center',
          fixed: 'right',
          scopedSlots: {customRender: 'action'}
        },
        'formTask/my/todoTaskList': {
          title: '操作',
          width: 100,
          align: 'center',
          fixed: 'right',
          scopedSlots: {customRender: 'action'}
        },
        'formTask/my/approveList': {
          title: '操作',
          width: 120,
          align: 'center',
          fixed: 'right',
          scopedSlots: {customRender: 'action'}
        },
        'adminBasic/getDraft': {
          title: '操作',
          width: 100,
          align: 'center',
          fixed: 'right',
          scopedSlots: {customRender: 'action'}
        }
      },
      name: '',
      subject: '',
      roleId: ''
    }
  },
  watch: {
    businessCenterTableData: {
      deep: true,
      handler: async function (data) {
        await this.businessCenterTableColumnCloneColumn.map(item => {
          const arr = data.map(value => {
            if (!value[item.dataIndex]) value[item.dataIndex] = ''
            return value[item.dataIndex]
          })
          arr.push(item.title)
          //操作的宽度设置不计算
          item.title === '操作' ? null : item.width = getMaxLength(arr) + 80
          // item.width = getMaxLength(arr) + 80
          return item
        })
        await setTimeout(() => {
          const lengthWidth = document.querySelector('.lengthWidth');
          lengthWidth && lengthWidth.remove();
        }, 500)
      }
    },
    activeKeyIndex: {
      deep: true,
      handler: function (index) {
        // this.actionActiveKeys.activeKey = this.tabPaneListProp[index].key
        this.businessCenterTabsChange(this.tabPaneListProp[index].key)
      }
    }
  },
  async created() {
    this.roleId = getLocalStorage('roleId')
    if (this.roleId === '303') {
      this.actionActiveKeys.activeKey = this.tabPaneListProp[0].key;
    } else {
      this.actionActiveKeys.activeKey = this.tabPaneListProp[1].key
    }
    if(this.roleId==='364' || this.roleId==='365') {
      this.tabPaneListProp.push({
        key: 'formTask/task/listJson',
        tab: '所有流程'
      })
      this.actionColumns['formTask/task/listJson'] = {
        title: '操作',
        width: 100,
        align: 'center',
        fixed: 'right',
        scopedSlots: {customRender: 'action'}
      }
    }
    this.businessCenterTableColumnCloneColumn = [].concat(this.customTableStyle([
      ..._.cloneDeep(this.businessCenterTableColumn),
      {
        ...this.actionColumns[this.actionActiveKeys.activeKey]
      }
    ]));
    const {current, pageSize} = this.businessCenterTablePagination;
    await this.apiGetFormTaskList(this.actionActiveKeys.activeKey, {
      limit: pageSize,
      "inst.def_name_^VLK": this.name,
      "task.subject_^VLK": this.subject,
      order: "asc",
      offset: current - 1
    })
  },
  methods: {
    customTableStyle(columns) {
      return columns && columns.length && _.cloneDeep(columns).map(column => {
        column.customCell = (record, index) => {
          return {
            style: {
              padding: '5px 16px',
              background: index % 2 ? '#F0FAFF' : ''
            },
          };
        };
        column.customHeaderCell = () => {
          return {
            style: {
              padding: '10px 16px',
            },
          };
        };
        return column;
      })
    },
    async businessCenterTabsChange(activeKey) {
      this.businessCenterTablePagination = {
        current: 1,
        pageSize: 10,
        showQuickJumper: true,
        total: 0
      }
      this.name = this.subject = ''
      this.actionActiveKeys.activeKey = activeKey
      this.businessCenterTableColumnCloneColumn = [].concat(this.customTableStyle([
        ..._.cloneDeep(this.businessCenterTableColumn),
        {
          ...this.actionColumns[activeKey]
        }
      ]));
      const {pageSize, current} = this.businessCenterTablePagination
      await this.apiGetFormTaskList(activeKey, {
        "inst.def_name_^VLK": this.name,
        "task.subject_^VLK": this.subject,
        order: "asc",
        offset: pageSize,
        limit: (current - 1) * pageSize
      })
    },
    async apiGetFormTaskList(activeKey, data) {
      await getFormTaskList(activeKey, {
        ...data
      }).then(async (res) => {
        const {success, data, total} = res
        this.businessCenterTablePagination.total = total
        if (success) {
          message.success('获取成功')
          this.businessCenterTableData = data
        } else {
          this.businessCenterTableData = []
        }
      })
    },
    apiGetFormTaskListSearch(value) {
      this.name = value.name
      this.subject = value.subject
      this.apiGetFormTaskList('formTask/my/applyTaskList', {
        limit: 10,
        offset: 0,
        "task.subject_^VLK": this.subject,
        "inst.def_name_^VLK": this.name,
        order: "asc"
      })
    },
    async businessCenterTablePaginationChange(pagination) {
      await this.apiGetFormTaskList(this.actionActiveKeys.activeKey === '' ? 'formTask/my/applyTaskList' : this.actionActiveKeys.activeKey, {
        limit: pagination.pageSize,
        offset: (pagination.current - 1) * pagination.pageSize,
        "inst.def_name_^VLK": this.name,
        "task.subject_^VLK": this.subject,
        order: "asc"
      })
      this.businessCenterTablePagination = {...pagination}
    },
    // 局长导出按钮
    exportExcelClick() {
      uploadProcess({
        status: '2',
        order: 'asc',
        offset: 0,
        like: '',
        limit: 999999
      }).then(res => {
        if (res.success) {
          downLoadFileByBlob(res.data, "我的待办")
        } else {
          message.error('下载excel错误')
        }
      })
    },
    //撤回成功后表格数据更新
    async businessTableDataChaneg () {
      const {pageSize, current} = this.businessCenterTablePagination
      await this.apiGetFormTaskList(this.actionActiveKeys.activeKey === '' ? 'formTask/my/applyTaskList' : this.actionActiveKeys.activeKey, {
        limit: pageSize,
        offset: (current - 1) * pageSize,
        "inst.def_name_^VLK": '',
        "task.subject_^VLK": '',
        order: "asc"
      })
    }
  },

}
</script>

<style scoped lang="less">
// /deep/ * {

// }
.business-tabs-export{
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
}
</style>
